<template>
  <div class="p-3 h-full flex dt-page w-full">
    <DtTable @register="registerTable">
      <template #headerTop>
        <div class="font-bold">主要演示table中用到form表单的示例, 时间格式参考dayjs, 自行处理!</div>
      </template>
    </DtTable>
  </div>
</template>

<script lang="tsx" setup>
import { dict } from '@zm-pkg/core'
import { useTable } from '@zm-pkg/ui'

const loading = ref(true)
const dataSource = ref([])

setTimeout(() => {
  for(let i = 0; i < 1500; i++) {
    dataSource.value.push({
      id: i + 1,
      baseColumn1: Math.round(Math.random()),
      baseColumn2: Math.ceil(Math.random() * 2),
      baseColumn3: Math.ceil(Math.random() * 400000000),
      baseColumn4: Math.round(Math.random()),
      baseColumn5: (Math.round(Math.random() * 100)) / 100,
      baseColumn6: null
    })
  }

  loading.value = false
}, 200);


const [registerTable] = useTable({
  loading,
  toolbar: [
    { label: '查看修改后的数据', type: 'primary', preIcon: 'ic:baseline-visibility', onClick() {
        console.log(dataSource.value)
      } }
  ],
  tableSetting: false,
  columns: [
    { title: '下拉框', dataIndex: 'baseColumn1', edit: true, editComponent: 'Select', editComponentProps: {
        options: dict('YES_NO')
      } },

    { title: '输入框(*必填)', dataIndex: 'baseColumn2', edit: true, editComponent: 'Input', editRule: true, editComponentProps: {
        required: true
      } },
    { title: '数字', dataIndex: 'baseColumn3', edit: true, editComponent: 'InputNumber'},
    { title: '开关', dataIndex: 'baseColumn4', edit: true, editComponent: 'Switch', editComponentProps: {
        checkedChildren: '开',
        unCheckedChildren: '关'
      } },
    { title: '复选框', dataIndex: 'baseColumn5', edit: true, editComponent: 'Checkbox' },
    { title: '时间', dataIndex: 'baseColumn6', edit: true, editComponent: 'DatePicker', editComponentProps: {
        text: '测试',
      } },

  ],
  dataSource
})
</script>

<style lang="less" scoped>
.dt-page{
  background: #f0f2f5;
}

:deep(.dt-table) {
  padding: 6px 20px;
  border-radius: 2px;
  background: #fff;
  border-radius: 5px;

  .redRow{
    background: rgba(231, 137, 137, 0.458);
  }
}
</style>
